<!--年度开设专业查询 -->
<template>
  <div class="wrapper-container">
    <div class="table-container" style="position: relative;">
      <el-table
        :data="tableData"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
      >
        <el-table-column prop="cz" label="操作" align="center">
          <template slot-scope="scope">
            <div style="display: flex; margin: 0 auto">
              <div class="bk-lucj-import-button" @click="xg(scope.row)">
                <img
                  src="../../../assets/assessment/icon-plan-record-detail.png"
                  alt=""
                  style="width:13px;height:13px;position:relative;top:1px"
                />
                编辑
              </div>
              <div class="de-lucj-import-button" @click="sc(scope.$index)">
                <img
                  src="../../../assets/assessment/icon-delete.png"
                  alt=""
                  style="width:13px;height:13px;position:relative;top:1px"
                />
                删除
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="year" label="年度" align="center">
        </el-table-column>
        <el-table-column prop="zsbx" label="招生系部" align="center">
        </el-table-column>
        <el-table-column prop="specialtyName" align="center">
          <template slot-scope="scope" slot="header">
            <div style="line-height: 20px;">开设专业</div>
            <div style="line-height: 20px;">【培养层次】</div>
          </template>
          <template slot-scope="scope">
            <div>{{ scope.row.specialtyName }}</div>
            <div>【{{ scope.row.trainingLevelname }}】</div>
          </template>
        </el-table-column>
        <el-table-column prop="standardEduSystem" label="学制" align="center">
        </el-table-column>
        <el-table-column prop="rxxueqi" label="入学学期" align="center">
        </el-table-column>
        <el-table-column prop="byxueqi" label="毕业学期" align="center">
        </el-table-column>
        <el-table-column prop="bz" label="备注" align="center">
        </el-table-column>
      </el-table>
      <div class="bottom-block" style="margin-top: 20px;">
        <div class="export-button" style="margin-top:15px">
          <img src="../../../assets/assessment/icon-export.png" alt=""/>
          <download-excel
            class="export-btn"
            :data="tableData"
            :fields="jsonFields"
            type="xls"
            name="年度开设专业.xls"
            style="color: #f3b815;cursor: pointer"
          >
            &ensp;导出Excel
        </download-excel>
        </div>
      </div>
      <div class="block" style="position: absolute;bottom: 0;right: 0;">
        <el-pagination
          style="padding:0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-size="size"
          :page-sizes="[10, 20, 30]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="修改年度开设专业"
      :visible.sync="showManualEntryDialog"
      width="50%"
      class="manual-entry-container"
    >
      <div class="assessment-edit-plan-container" style="width: 100%;margin: 30px auto 20px;border-radius:6px"> <!--
        <div class="my-form-container" style="width: 100%; height: auto">
          <el-row class="my-form-item">
            <el-col :span="12">
              <div class="my-form-item-label" style="width:200px;">年度</div>
              <div class="my-form-item-value">{{  this.rowIndex.year }}</div>
            </el-col>
            <el-col :span="12">
              <div class="my-form-item-label" style="width:200px;">开设专业</div>
              <div class="my-form-item-value">
                {{  this.rowIndex.specialtyName }}
              </div>
            </el-col>
          </el-row>
          <el-row class="my-form-item">
            <el-col :span="12">
              <div class="my-form-item-label" style="width:200px;">培养层次【学制】</div>
              <div class="my-form-item-value">
                {{  this.rowIndex.trainingLevelname
                }}{{  this.rowIndex.standardEduSystem }}
              </div>
            </el-col>
            <el-col :span="12">
              <div class="my-form-item-label" style="width:200px;">招生部系</div>
              <div class="my-form-item-value">
              <el-select v-model="zsbx" placeholder="请选择" style="width:100%;">
              <el-option
                v-for="item in zsxbList"
                :key="item.value"
                :label="item.deptName"
                :value="item.deptName"
              >
              </el-option>
            </el-select>
            </div>
            </el-col>
          </el-row>
          <el-row class="my-form-item">
            <el-col :span="12">
              <div class="my-form-item-label" style="width:200px;">入学学期</div>
              <div class="my-form-item-value">
              <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="rxxq"

              type="date"
              placeholder="选择日期"
            >
            </el-date-picker></div>
            </el-col>
            <el-col :span="12">
              <div class="my-form-item-label" style="width:200px;">毕业学期</div>
              <div class="my-form-item-value" style="padding: 6px 40px;background-color:gold;">
               <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="byxq"

              type="date"
              placeholder="选择日期"
            >
            </el-date-picker></div>
            </el-col>
          </el-row>
          <el-row class="my-form-item" style="height: 120px">
            <el-col :span="24">
              <div class="my-form-item-label" style="width:200px;">备注</div>
              <div class="my-form-item-value"   style="padding: 6px 40px;">
              <el-input
                v-model="bz2" type="textarea" rows="4"
                placeholder="请输入内容"
                class="input1"
              ></el-input></div>
            </el-col>
          </el-row> -->

        <el-form label-position="right" label-width="10px" label-suffix="：">
          <table style="width:100%;border-collapse:separate;border-spacing:1px;background-color:#95b4db;" class="el-table--fit el-table--border table-data">
            <tr>
              <td class="form-label"><span>年度：</span></td>
              <td class="form-item">
                {{  this.rowIndex.year }}
              </td>
              <td class="form-label"><span>开设专业：</span></td>
              <td class="form-item">
                {{  this.rowIndex.specialtyName }}
              </td>
            </tr>
            <tr>
              <td class="form-label"><span>培养层次【学制】：</span></td>
              <td class="form-item">
                  {{  this.rowIndex.trainingLevelname
                }}【{{  this.rowIndex.standardEduSystem }}】
              </td>
              <td class="form-label"><span>招生部系：</span></td>
              <td class="form-item">
                <el-select v-model="zsbx" placeholder="请选择" style="width:100%;margin:0;" size="mini">
                  <el-option
                    v-for="item in zsxbList"
                    :key="item.value"
                    :label="item.deptName"
                    :value="item.deptName"
                  >
                  </el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td class="form-label"><span>入学学期：</span></td>
              <td class="form-item">
                <el-select v-model="rxxq" placeholder="请选择">
                  <el-option 
                    v-for="(item,index) in rxsjList"
                    :key="index"
                    :label="item.xqmc"
                    :value="item.xqmc"
                  >
                  </el-option>
                </el-select>
                <!-- <el-date-picker  style="width:100%;margin:0;" size="mini"
                  value-format="yyyy-MM-dd"
                  v-model="rxxq"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker> -->
              </td>
              <td class="form-label"><span>毕业学期：</span></td>
              <td class="form-item">
                <el-select v-model="byxq" placeholder="请选择">
                  <el-option 
                    v-for="(item,index) in rxsjList"
                    :key="index"
                    :label="item.xqmc"
                    :value="item.xqmc"
                  >
                  </el-option>
                </el-select>
                <!-- <el-date-picker style="width:100%;margin:0;" size="mini"
                  value-format="yyyy-MM-dd"
                  v-model="byxq"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker> -->
              </td>
            </tr>
            <tr>
              <td class="form-label"><span>备注：</span></td>
              <td class="form-item" colspan="3">
              <el-input
                v-model="bz2" type="textarea" rows="4"
                placeholder="请输入内容"
                class="input1"
              ></el-input>
              </td>
            </tr>
          </table>
        </el-form>
        </div>
        <span
          slot="footer"
          class="dialog-footer"
        >
        <div class="button-group">
          <div class="" @click="pjByIdGuide">保 存</div>
          <div class="" @click="pjByIdGuide2">取 消</div>
        </div>
        <!-- <el-button type="success" size="small" @click="pjByIdGuide" style="padding:12px 20px;border-radius: 4px;">保 存</el-button>
        <el-button type="danger" size="small" @click="pjByIdGuide2"  style="padding:12px 20px;margin-left:60px;border-radius: 4px;">取 消</el-button> -->
        </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="showManualEntryDialog2"
      width="50%"
      class="ts"
    >
      <div
        style="width: 283px; margin: 0 auto; font-size: 18px; margin-top: 6%"
      >
        <span style="color: #004ca7">**课在排课中有排课，不可删除！</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ndkszycx, xgndkszy,scndkszy, zsxbselset } from "@/api/professional/details";
import { reqGetXqList } from '@/api/admin1/check.js'
export default {
  data() {
    return {
      current:1,
      size:10,
      total:'',
      input: "",
      nd: "",
      bz2: "",
      kszy: "",
      pycc: "",
      zsbx: "",
      zsxbList: [],
      rxxq: "",
      byxq: "",
      rowIndex:"",
      tablelist: [],
      jsonFields: {
        年度: "year",
        招生系部: "zsbx",
        开设专业: "specialtyName",
        培养层次: "trainingLevelname",
        学制: "standardEduSystem",
        入学学期: "rxxueqi",
        毕业学期: "byxueqi",
        备注: "bz",
      },
      rxxqList: [],
      rxsjList:[],
      byxqList: [],
      showManualEntryDialog: false,
      showManualEntryDialog2: false,
      zsxb1: "",
      tableData: [],
    };
  },
  created() {
    this.zsxbselset();
    this.reqGetXqList();
    this.getlist();
  }, 
  mounted() {},
  methods: {
    reqGetXqList() {
      reqGetXqList().then((res) => {
        this.rxsjList = res.data.data
      })
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getlist();
    },
    handleSizeChange(val) {
      this.size = val;
      this.getlist();
    },
     zsxbselset() {
      zsxbselset().then(res => {
        this.zsxbList = res.data.data;
        console.log(this.zsxbList, "555");
      });
    },
    xg(index) {
      this.showManualEntryDialog = true;
      this.rowIndex = index;
      this.bz2 = this.rowIndex.bz
      this.zsbx = this.rowIndex.zsbx
      this.rxxq= this.rowIndex.rxxueqi
      this.byxq= this.rowIndex.byxueqi
      console.log(this.rowIndex,"0.0.0.0.0")
    },
    sc(index) {
      this.scid = this.tableData[index].id;
      let id = this.scid;
      this.$confirm('确认要删除吗？')
        .then(_ => {
          return new Promise(() => {
            scndkszy(id).then((res) => {
              if(res.data.code == 200 && JSON.stringify(res.data.data) === '{}') {
                this.$message({ type: "success", message: "删除成功！" });
                this.getlist();
              } else {
                this.$message({ type: "error", message: res.data.data, duration:5000 });
                this.getlist();
              }
            });
          });
        })
    },
    pjByIdGuide() {
      let obj = {
        id: this.rowIndex.id,
        zsbx: this.zsbx,
        rxxueqi: this.rxxq,
        byxueqi: this.byxq,
        bz: this.bz2,
      };
      return new Promise(() => {
        xgndkszy(obj).then((res) => {
          if(res.data.code == 200){
            this.$message({ type: "success", message: "保存成功！" });
            this.showManualEntryDialog = false;
            this.getlist();
          }
        });
      });
    },
    pjByIdGuide2() {
      this.showManualEntryDialog = false;
      // this.getlist();
    },
    getlist() {
      let obj = {
        year: this.$route.query.year,
      };
      return new Promise(() => {
        ndkszycx(this.current,this.size,obj).then((res) => {
          this.tableData = res.data.data.records;
          this.total = res.data.data.records.length > 0 ? res.data.data.total : '';
        });
      });
    },
  },
};
</script>
<style lang="less" scoped>
.el-input { ::v-deep .el-input__inner {width: 80%;margin-left: 10%;margin-top: 5%;}}
/deep/.el-input__suffix {
  right: 5px;
}
/deep/.el-date-editor .el-input__prefix{
  right: 5%;
  top: 5%;
}
</style>
<style lang="less" scoped>
.button-group {
    cursor: pointer;
    margin: 30px;
    text-align: center;

    > div {
      display: inline-block;
      font-size: 18px;
      padding: 6px 22px;
      border-radius: 6px;

      &:nth-child(1) {
        color: #f3b815;
        border: 1px solid #f3b815;
        background: #fff6ef;
        margin-right: 139px;
      }

      &:nth-child(2) {
        color: #ff3819;
        border: 1px solid #ff3819;
        background: #ffefef;
      }
    }
  }
.search-container {
  justify-content: flex-start !important;
}

.search-button {
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 27px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;

  > span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }

  > img {
    width: 19px;
    height: 19px;
    margin-right: 4px;
  }
}
.export-button {
  background: #fff6ef;
  border: 1px solid #f3b815;
  width: 130px;
  height: 28px;
  line-height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  box-sizing: border-box;
  > span {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #f3b815;
  }
  > img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
}
.input1 {
  .el-input__inner {
    height: 60%;
    margin-top: 3%;
  }
}
.el-input__suffix {
  right: 20px;
}
.ts {
  .el-dialog {
    height: 300px;
  }
}
.table-container {
  .el-table {
    width: 100% !important;
    margin: 0 auto;
  }
  margin-top: 0;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }
  .el-table {
    border-color: #004ca7;
  }
  .el-table--border {
    border-right: 1px solid #004ca7;
    border-bottom: 1px solid #004ca7;
  }
  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="less" scoped>
.table-container .el-table__body tr,
.table-container .el-table__body td {
  color: #004ca7 !important;
}
.bk-lucj-import-button {
  cursor: pointer;
  width: 90px;
  height: 28px;
  line-height: 28px;
  display: block;
  background: #ffffff;
  border-radius: 6px;
  border: none;
  background: #f1fff8;
  border: 1px solid #02c86c;
  box-sizing: border-box;
  color: #02c86c;
}
.de-lucj-import-button{
  cursor: pointer;
  width: 90px;
  height: 28px;
  line-height: 28px;
  border-radius: 6px;
  display: block;
  background: #ffffff;
  border: none;
  background: #ffefef;
  border: 1px solid #ff3819;
  box-sizing: border-box;
  color: #ff3819;
  margin-left: 10px;
}
.bk-lucj-import-button2 {
  margin-left: 20px;
  width: 70px;
  background: #ffefef;
  border: 1px solid #ff3819;
  color: #ff3819;
  border-radius: 4px;
  img {
    width: 20px !important;
    height: 20px !important;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}
td.form-label {
  background-color: #edf2f9;
  color: #004ca7;
  font-size: 16px;
  font-weight: bold;
  line-height: 50px;
  width: 20%;
  text-align: center;
}
td.form-item {
  background-color: #ffffff;
  color: #004ca7;
  font-size: 16px;
  line-height: 50px;
  width: 30%;
  text-align: left;
  padding: 5px 40px;
}
.el-date-editor {
  > ::v-deep .el-input__inner {
    width: 100%;
    margin-left: 0;
  }
}
.el-select {
  ::v-deep .el-input__inner {
    width: 100%;
    margin-left: 0;
  }
}

@fontFamily:"Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;

            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
</style>
